<template>
	<div class="hello">
		<div class="fixed">
			
		<div class="title flex">
			<div >
				
			</div>
		
			<div class="title_left">
				拼券广场
			</div>
			<div class="title_active flex" @click="skiptoaddactive">
				查看报名活动
			</div>
		</div>
		<div class="top">
			<el-form @submit.native.prevent>
				<el-form-item>
					<el-select v-model="form.region" placeholder="类型" class="input-select">
						<el-option label="石家庄" v-model="address"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="block">
				<el-date-picker class="input-class" v-model="active_start_time"  :picker-options="pickerOptionsStart" type="date" placeholder="开始日期">
				</el-date-picker>
			</div>
			<div class="block">
				<el-date-picker class="input-class" v-model="active_end_time" :picker-options="pickerOptionsEnd" type="date" placeholder="结束日期">
				</el-date-picker>
			</div>
			<button class="top_btn" @click="search">搜索</button>
		</div>
		</div>
		<div class="coupon" v-if="tableData!=''">
			<div class="coupon_list" v-for="item in tableData"  >
				<div class="coupon_list_center" > 
					
				
			  <div class="list_title">
			  	{{item.active_name}}
			  </div>
			  <div class="list_period">
			  	活动周期:<span>{{item.active_start_time}}至{{item.active_end_time}}</span>
			  </div>
			  <div class="list_addshop"> 
			  	参与店铺:<span >{{item.num_ct}}名</span>
			  </div>
			  <div class="list_alredy">
			  	已报名:<span >{{item.num_bm}}名</span>
			  </div>
			   <div class="list_require">
			  	要求说明:
			  </div>
			  <div style="width: 90%; height: 4.6304rem;border-radius: 5px;border: 1px solid gainsboro; font-size: 0.565217rem;padding: 0.5rem;" >
			  	{{item.active_require}}
			  </div>
			  <div class="list_but flex">
			  	<button @click="skiptoshoplist(item.active_id)" >查看已参加活动</button>
			  	<button v-if="item.active_store_id==store_id "style="background: gainsboro;border: none;">我要报名</button>
			  	<button v-else  @click="skiptosignup(item.active_id)">我要报名</button>
			  </div>
			</div>
			</div>
		
		</div>
		
	<div class="none flex" v-else>
			空空如也哦~
		</div>
	</div>

</template>

<script>
	import Clipboard from 'clipboard';
	 import wx from 'weixin-js-sdk';
	export default {
		name: 'aquare',
		data() {
			return {
				 imgs:require("../assets/images/bg3.jpg"),
                tableData:"",
				locations: '',
				store_id:localStorage.getItem("store_id"),
				active_start_time: '',
				active_end_time: '',
				address:"石家庄",
				form: {
					region: '',
				},
				pickerOptionsStart: {
					disabledDate: time => {
						let endDateVal = this.active_end_time;
						if (endDateVal) {
							return time.getTime() > new Date(endDateVal).getTime();
						}
					}
				},
				pickerOptionsEnd: {
					disabledDate: time => {
						let beginDateVal = this.active_start_time;
						if (beginDateVal) {
							return (time.getTime() < new Date(beginDateVal).getTime() + 1* 24 * 60 * 60 * 1000);
						}
					}
				}
				

			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {
			this.locations = window.location.href
			this.show()
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			skiptocreate_coupons() {
				this.$router.push({
					path: '/Create_coupons'
				});
			},
			hello(){
				console.log(this.baseURL)
			},
			skiptobegin() {
				this.$router.push({
					path: '/begin'
				});
			},
			
			skiptofully() {
				this.$router.push({
					name: 'fully',
					params:{
						id:'235'
					}
				});
			},
			skiptoaddactive(){
				this.$router.push({
					path: '/addactive'
				});
			},
			skiptosignup(id) {
				  
					this.$router.push({
					path: '/signup',
					query:{
						active_id:id
					}
				});
				
				
			},
			skiptoVerification() {
				this.$router.push({
					path: '/Verification'
				});
			},
			skiptoshoplist(id){
				this.$router.push({
					path: '/shoplist',
					query:{
						active_id:id
					}
				});
			},
			 checkTime(i){
			
			 if(i<10){
			
			i = '0'+i
			
			}
			
			return i
			
			},




			search(){
				var date; 
				date= new Date(this.active_start_time)
                 var date_star_Time = date.getFullYear()+'-'+this.checkTime(date.getMonth()+1)+'-'+this.checkTime(date.getDate());
                 date= new Date(this.active_end_time)
                 var date_end_Time = date.getFullYear()+'-'+this.checkTime(date.getMonth()+1)+'-'+this.checkTime(date.getDate());
                this.show(date_star_Time,date_end_Time,this.address)
			},
			show(active_start_time,active_end_time,address){
					var that=this;
      var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/list_coupon", qs.stringify({
						"active_start_time":active_start_time,
				"active_end_time":active_end_time,
				"title":address,
				"key":localStorage.getItem("key")
				})).then(response => {
					console.log(response)
					that.tableData=response.data.data
					console.log(that.tableData)
					})
					.catch(error => {

					});
    
         },
			
//微信分享
 shard (url) {
  wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: this.appId, // 必填，公众号的唯一标识
  timestamp: this.timestamp, // 必填，生成签名的时间戳
  nonceStr: this.nonceStr, // 必填，生成签名的随机串
  signature: this.signature, // 必填，签名，见附录1
  
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  })
  wx.onMenuShareTimeline({
  title: this.details.videoTitle, // 分享标题
  link: url+'#/...', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: this.details.coverUrl, // 分享图标
  success () {
   alert('分享朋友圈成功')
   // 用户确认分享后执行的回调函数
  },
  cancel () {
   // 用户取消分享后执行的回调函数
  }
  })
  wx.onMenuShareAppMessage({
  title: this.details.videoTitle, // 分享标题
  desc: this.details.videoTitle, // 分享描述
  link: url+'#/...', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: this.details.coverUrl, // 分享图标
  type: 'video', // 分享类型,music、video或link，不填默认为link
  dataUrl: this.details.videoUrl, // 如果type是music或video，则要提供数据链接，默认为空
  success: function () {
   alert('分享给朋友成功')
   // 用户确认分享后执行的回调函数
  },
  cancel: function () {
   // 用户取消分享后执行的回调函数
  }
  })
 }

		},
		mounted() {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#hello {
		-webkit-overflow-scrolling: touch;
		background: red;
	}
	
	.input-class {
		 width: 3.4565rem;
    height: 1.1086rem;
		text-align: center;
	}
	
	.top {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 0.5rem;
	}
	 .title{
        justify-content: space-between;
    	width:90%;
    	padding: 5% ;
    
    }
    .title>div{
    	width: calc(100%/3);
    	text-align: center;
    }
   .fixed{
   	position: fixed;
    	top: 0;
    	background: white;
    	width: 100%;
    	max-width: 640px;
    	z-index: 99;
   }
   .title_left{
   	font-size: 0.6956rem;
   	color: #3e474e;
   	
   	
   }
   .title_active{
   	font-size: 0.56521rem;
   		color: #3e474e;
  justify-content: flex-end;
  align-items: center;
   }
  /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 4rem !important;
}
	/deep/ .el-input__prefix {
    display: none;
}
/deep/.el-input--prefix .el-input__inner {
   margin-left: 0.5rem;
   padding-left: 0;
   padding-right: 0;
   text-align: center;
}
/deep/ .el-input__inner {
   border: 1px solid #007AFF;
   font-size: 0.5217rem;
 
}
/deep/.el-button{
	 height: 1.1086rem;
}
  /deep/.block{
  	 width: 3.4565rem;
    height: 1.1086rem;
  }
  /deep/.el-form{
  	 width: 3.4565rem;
    height: 1.1086rem;
  }
  /deep/.el-input {
    position: initial;
    font-size: 14px;
    display: block; 
     width: 100%; 
}
.search{
	justify-content: center;
	align-content: center;
}
.top_btn{
	width: 2.2173rem;
	height: 1.1086rem;
	background: #007AFF;
	color: white;
	font-size: 0.4782rem;
	border: none;
	border-radius: 3px;
}
.coupon{
	margin-top: 4rem;
	width: 100%;
	background: #F5F6FA;
	padding-top: 1rem;
	padding-bottom:3rem;
	-webkit-overflow-scrolling : touch;
}
.coupon_list{
	background: white;
	width: 15.5217rem;
	border-radius: 22px;
	border: 1px solid white;
	height: 17.32608rem;
	margin:  auto;
	margin-bottom: 0.5rem;
}
.coupon_list_center{
	width: 90%;
	margin:0.826rem auto;
}
.coupon_list span{
    color: #868E91;
    font-size: 0.56521rem;
}
.list_title{
	color: #3E474E;
	font-size: 0.8695rem;
	font-weight: bold;
	margin-bottom: 1.10869rem;
}
.list_period, .list_addshop, .list_alredy, .list_require{
	font-size: 0.60869rem;
	font-weight: bold;
	color: #3E474E;
	margin-bottom: 0.3rem;
}
.list_require{
margin-top: 0.78695rem;
	
}
.list_but{
	margin-top: 1.5173rem;
	justify-content: flex-end;
	align-content: center;
	
}

.list_but>button{
	height: 1.4347rem;
	border-radius: 0.4782rem;
	border: none;
	font-size: 0.5652rem;
	padding:0  0.7173rem;
	
}
.list_but>button:nth-child(1){
	border: 1px solid #007AFF;
	color:#007AFF ;
	background: white;
	margin-right: 0.2rem;
}
.list_but>button:nth-child(2){
	border: 1px solid #007AFF;
	color: white ;
	background: #007AFF;
	margin-right: 0.2rem;
}
textarea{
	color: #868E91;
	font-size: 0.56521rem;
	padding-top:0.3rem ;
}
</style>
<style>
	.el-select-dropdown__list {
		display: flex;
		flex-direction: column;
	}
	
	.el-input__inner {
		padding: 0 0.2rem;
	}
	
	.el-input--suffix .el-input__inner {
		padding-right: 0;
		line-height: 1.1086rem;
	}
	
	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}
	
    .top>.el-form>.el-form-item>.el-form-item__content>.el-select>.el-input>input {
    width: 3.4565rem;
    height: 1.1086rem;
    line-height: 1.1086rem;
}
  .top>.el-form>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__suffix>.el-input__suffix-inner>.el-input__icon {
   
    line-height: 1.1086rem;
    color: #007AFF ;
}
 .top>.el-form>.el-form-item>.el-form-item__content {
   line-height: 1.1086rem;
}
.top>.block>.el-input>input{
	 width: 3.4565rem;
    height: 1.1086rem;
    line-height: 1.1086rem;
}
.none {
		position: fixed;
		width: 100%;
		height: 100%;
		background: #F5F6FA;
		justify-content: center;
		align-items: center;
		font-size: 0.5217rem;
	}
</style>